<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Courier New', Courier, monospace;
        }

        :root {
            --backgroundColor: #111;
            --fontSize: 24px
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

    
        

    </style>
</head>

<body>



    <h1>
        Horizontal-scrolling
    </h1>
    
    <br><br><br>

    <h2 style="border-left: 5px solid black ;  line-height: 22px; margin-left: 12px; padding-left: 12px; ">Microsoft
    Product: </h2>
    
    
        <br><br>


    <style>
        .product {
            list-style: none;
            width: 100%;
            overflow-x: scroll;
            white-space: nowrap;
        }

        .product li {
            width: 260px;
            display: inline-block;
        }
        .product li p{
            white-space: normal;
        }
        .product li img {
            width: 100%;
            height: 160px;
        }

        .product li button {
            width: 100%;
            padding: 8px;
            border: none;
            border: 1px solid black;
            background: transparent;
        }
    </style>
    <ul class="product  clearfix">
        <li>
            <div>
                <img src="../img/Tesla (10).jpeg" alt="">
                <h3>Book 6 Pro</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                <button> 了解更多 </button>
            </div>
        </li>
        <li>
            <div>
                <img src="../img/Tesla (11).jpeg" alt="">
                <h3>iphone 6 Pro</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                <button>了解更多</button>
            </div>
        </li>
        <li>
            <div>
                <img src="../img/Tesla (12).jpeg" alt="">
                <h3>xiaomi 6 Pro</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                <button>了解更多</button>
            </div>
        </li>
        <li>
            <div>
                <img src="../img/Tesla (13).jpeg" alt="">
                <h3>onePlus 6 Pro</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                <button>了解更多</button>
            </div>
        </li>
    </ul>

    <br>
    

    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">   


        .product {
            list-style: none;
            width: 100%;
            overflow-x: scroll;        横向滚动条
            white-space: nowrap;
        }
        .product li {
            width: 260px;
            display: inline-block;     设置为 行内元素
        }
        .product li p{
            white-space: normal;       p 标签的文字正常排布
        }



        <ul class="product  clearfix">
            <li>
                <div>
                    <img src="../img/Tesla (10).jpeg" alt="">
                    <h3>Book 6 Pro</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum dignissimos eligendi praesentium?</p>
                    <button> 了解更多 </button>
                </div>
            </li>

            
            另外 :

            <h2 style="border-left: 5px solid black ;  
               line-height: 22px; margin-left: 12px; 
               padding-left: 12px; ">Microsoft Product: </h2>
    </xmp>


    <h1 style="font-size: 161px;">&#9776;</h1>
    <h1 style="font-size: 161px;">&Tilde; ~ <h1>
            <h1 style="font-size: 161px;">&times; <h1>


</html>